
*{
  margin: 0;
  padding: 0;
}
html,body{
  max-width: 768px;
  margin: 0 auto;
}
.gif_box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fcb2ab;
  z-index: 99;
  text-align: center;
}
.gif_img_box{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.gif_text{
  color: #fff;
  font-size: 16px;
  text-align: center;
  border: 1px solid #fff;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 6px;
  margin-top: 10px;
}
.gif_img_box img{
  height: 100vh;
}
#gif_last,#gif_last_btn{
  display: none;
}
.gif_last_btn{
  position: fixed;
  bottom: 35px;
  left: 50%;
  transform: translate(-50%, 0);
  background: #f15a49;
  color: #fff;
  width: 170px;
  height: 50px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}
.container{
  background: linear-gradient(180deg, rgba(113, 15, 12, 1), rgba(156, 24, 19, 1));
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
/* .container::before{
  content:'';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url('../img/bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
} */
.container_title{
  color: #fff;
  font-size: 18px;
  text-align: center;
  margin: 20px 0;
}
.package_box{
  background: #fff;
  flex: 1;
  margin: 0 40px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: -10000px;
  width: 295px;
}
.package_box.show{
  position: relative;
  left: initial;
  width: initial;
}
.package_box_title{
  color: #000;
  font-size: 20px;
  text-align: center;
  margin: 20px 0 10px 0;
  font-weight: bold;
}
.package_box_desc{
  color: #696969;
  font-size: 13px;
  text-align: center;
}
.package_media_box{
  flex: 1;
  font-size: 0;
}
.package_img_box{
  width: 120px;
  margin: 30px auto;
}
.package_img_box img{
  /* height: 100%; */
}
.package_video_box{
  text-align: center;
  margin: 40px auto;
}
.package_button_box{
  display: flex;
  align-items: center;
  justify-content: center;
}
.package_button{
  background: #f15a49;
  color: #fff;
  width: 170px;
  height: 50px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}
.package_share_box{
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.share_text{
  color: #5f6c7d;
}
.share_icon{
  margin-right: 6px;
  background-image: url();
  width: 17px;
  height: 15px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.package_list{
  display: flex;
  justify-content: center;
  padding: 20px 0;
  margin-left: 40px;
}
.package_item{
  margin-right: 20px;
}
.package_item_img{
  width: 45px;
  border-radius: 6px;
  margin-left: 6px;
  font-size: 0;
}
.package_item.active .package_item_img{
  /* margin-bottom: 10px; */
}
.package_item.active .package_item_text{
  color: #ffdf96;
}
.package_item_text{
  color: rgba(226, 132, 106, 1);
  margin-top: 5px;
  font-size: 13px;
}
.package_tips_box{
  color: #fff;
  margin-bottom: 50px;
  text-align: center;
}

.share_mask{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  /* background-image: url('../img/arrow.png');
  background-repeat: no-repeat;
  background-size: 100px; */
}
.share_mask_icon{
  width: 100px;
  height: 104px;
  position: absolute;
  right: 20px;
  top: 20px;
}
.share_mask_text{
  color: #fff;
  font-size: 20px;
  text-align: right;
  position: absolute;
  top: 130px;
  left: 50%;
  transform: translate(-50%, 0);
  white-space: nowrap;
}


.yellow{
  color: #ffdf96;
}
.mlr6{
  margin: 0 6px;
}
img{
  max-width: 100%;
}

video{
  background-image: url('../img/video_mini_img.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
}

.dialog_box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .55);
  z-index: 99;
  font-size: 17px;
  display: none;
}
.dialog_box .dialog_mask{
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.dialog_box .dialog_content{
  background: #fff;
  width: 80%;
  margin: 0 auto;
  border-radius: 12px;
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
.dialog_box .dialog_title{
  padding: 32px 24px 16px;
  text-align: center;
}
.dialog_box .dialog_desc{
  color: rgba(0, 0, 0, .55);
  padding: 0 24px;
  margin-bottom: 32px;
}
.dialog_box .dialog_btn{
  color: #576b95;
  padding: 20px 8px;
  font-size: 17px;
  border-top: 1px solid rgba(0,0,0,.1);
  text-align: center;
}